<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: #ff55ff;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia reprehenderit at quibusdam nam doloremque a aliquam, veniam accusamus atque modi dolores incidunt odio alias nobis enim esse totam laborum necessitatibus?</p>
		<div></div>
		<span>文本</span>
		
		<input type="button" value="按钮2"/>
		<input type="text" />
		<script>
			/*   JavaScript：基础语法+* DOM（页面）+BOM（浏览器）
			     JQuery操作DOM方式【7方式，36个函数】----改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html
				 .val
				 .text
				 2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
				 .attr()
				 .removeAttr()
				 .prop()          
				 .removeProp()
				√ 3.元素类名操作：操作css类样式【4个函数】
				 addClass()
				 removeClass()
				 togleClass()
				 hasClass()
				 4.元素样式【位置】操作：【5个函数】
				css()
				height()和width()
				outerHeight和outerWidth()
				√ 5.元素删除和插入操作：【7个函数】
				 qppend()
				 perpend()
				 after()
				 before()
				 remove()
				 empty()
				 replacewith()
				 6.元素遍历操作：【6个函数】
				 children()
				 parent()
				 siblings() 
				  next()
				  prev()
				  each()
				 7.动画操作：【7个函数】
				 show()
				 hide()
				 slideDown()
				 slideUp() 
				 fadeIn()
				 fadeOut() 
				 hover()
			*/
			
			
			
			
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另一个元素改变效果
			.html（）函数  增加一个元素覆盖原来的html
			.val()函数： input元素使用，改变修改表单元素文本
			*/
		   // $('button').click(function(){
			  //  //DOM操作---改变页面其他元素
			  //  //DOM操作---改变p元素改成marquee元素
			  //  $('p').html("<marquee>跑马灯.......</marquee>")
			   
		   // });
		   $('div').mouseenter(function(){
			   $('span').html("<a href='#'> 超文本 </a>");
		   });
		   $('input[type="button"]').click(function(){
			   $('input[type="text" ]').val("好运连连连")
		   });
		</script>
	</body>
</html>